<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>在线报名</title>
	<link rel="stylesheet" href="css/main.css">

	<style>
		.center {
			margin: 10px auto;
			width: 400px;
			text-align: center;
		}

		.row {
			margin-top: 5px;
			overflow: hidden;
		}

		input,
		select {
			border: solid 1px #8E84FF;
			background: #eceaff;
			border-radius: 1px;
			padding: 5px;
			/*width: 250px;*/
			width: 80%;
			box-sizing: border-box;
			font-size: 15px;
		}

		.row>div {
			height: 45px;
			box-sizing: border-box;
			float: left;
			padding: 5px;
			line-height: 45px;
		}

		.left {
			width: 80px;
			text-align: right;

		}

		.right {
			width: 300px;
			text-align: left;

		}

		button {
			/*width: 250px;*/
			width:80%;
			color: #fff;
			background: #8e84ff;
			height: 40px;
			/*margin-left: 10%;*/
			margin-top: 15px;
			border-radius: 5px;
			text-align: center;
			line-height: 40px;
		}
	</style>

</head>

<body>

	<div class="header">
		<div class="header_title">在线报名</div>
		<a onclick="history.back()">
			<img src="image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>

	<div class="center" id="vue-root">

		<div class="row">
			<div class="left">姓名：</div>
			<div class="right">
				<input v-model="item.name">
			</div>
		</div>
		<div class="row">
			<div class="left">性别：</div>
			<div class="right">
				<select v-model="item.sex">
					<option :value="true">男</option>
					<option :value="false">女</option>
				</select>
			</div>
		</div>
		<div class="row">
			<div class="left">年级：</div>
			<div class="right">
				<input v-model="item.grade">
			</div>
		</div>
		<div class="row">
			<div class="left">手机号：</div>
			<div class="right">
				<input v-model="item.phone" type="number">
			</div>
		</div>
		<div class="row">
			<div class="left">年龄：</div>
			<div class="right">
				<input v-model="item.age" type="number">
			</div>
		</div>
		<div class="row">
			<div class="left">住址：</div>
			<div class="right">
				<input v-model="item.address">
			</div>
		</div>

		<div class="row">
			<div class="left"></div>
			<div class="right" style="height: 60px">
				<button @click="submit">提交</button>
			</div>
		</div>

<!--	<div>
			<button @click="submit">提交</button>
		</div>-->

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>

	<script>

		new Vue({
			el: '#vue-root',
			data: {
				item: {
					schoolId: params().id
				}
			},
			methods: {
				submit: function () {
					if (!this.item.name) {
						alert('请填写姓名');
						return;
					}
					if (!this.item.phone) {
						alert('请填写手机号');
						return;
					}
					axios.post('/api/signup', this.item).then(function (res) {
						alert('提交成功');
						history.back();
					});
				}
			}
		});

	</script>

</body>

</html>